<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape particles</title>
    <link href="SP.css" rel="stylesheet">
</head>
<body>
    <video id="myVideo" autoplay muted loop>
        <source src="Bg-stars.mp4" type="video/mp4">
        <track src="Bg-stars-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
        <track src="Bg-stars-desc.vtt" kind="descriptions" srclang="en" label="English Descriptions">
    </video>
    <h1 class="SP">
        <span>S</span>
        <span>H</span>
        <span>A</span>
        <span>P</span>
        <span>E</span>
        <span>S</span>
    </h1>
    <div class="cube-container">
        <div class="cube">
            <h1 class="h1">CUBE</h1>
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>
    <div class="Triangle-container">
        <div class="triangle">
            <h1 class="h1">PRISM</h1>
            <div class="sides right"></div>
            <div class="sides left"></div>
            <div class="sides bottom"></div>
        </div>
    </div>
    
    <div class="sphere-container">
        <div class="sphere-inner">
            <h1 class="h1">SPHERE</h1>
        </div>
    </div>
    <div class="oval-outer">
        <div class="oval-inner">
            <h1 class="h1">OVAL</h1>
        </div>
    </div>
    <div class="rectangle">
    <h1 class="h1">RECTANGLE</h1>
    <div class=" block f"></div>
    <div class="block b"></div>
    <div class="block l"></div>
    <div class="block r"></div>
  </div>
  


</body>
</html>
    